<template>
  <div class="search-history">
    <van-cell title="搜索历史">
         <div v-if="isDeleteShow"> 
        <span @click="$emit('delect')">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
         </div>
         <van-icon v-else name="delete" @click="isDeleteShow = true" />
    </van-cell>
      <van-cell v-for="(xxc,i) in searchHistory" :key="i"
      :title="xxc" @click="onSearchItemClick(xxc,i)">
      <van-icon v-show="isDeleteShow"  name="close" />
    </van-cell>
    
  </div>
</template>

<script>
export default {
    name:"SearchHistory",
  data () {
    return {
        isDeleteShow: false 
    }
  },
props: {
  searchHistory:{
    type:Array,
    required:true
  }
  
},
  components: {},

  computed: {},

  mounted(){},

 // watch(){},

  methods: {
    onSearchItemClick(v,i){
        if (this.isDeleteShow) {
        // 删除状态，删除历史记录数据
        this.searchHistory.splice(i, 1)
      } else {
        // 非删除状态，直接进入搜索
        this.$emit('search', v)
        // 如果不想进行子传父，利用splice也可以
        // this.searchHistory.splice(0)
      }

    }
  }
}

</script>
<style scoped>
.search-history{
  margin-top: 108px;
}
</style>